<template>
    <div
        id="home"
        class="carousel banner">
        <div class="carousel-inner">
            <!-- <div class="mask"></div> -->
            <div class="carousel-inner-content">
                <div class="banner-text-container">
                    <h1 class="banner-title">Welcome To FAWA</h1>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    // import './styles/banner.scss';
</script>

<style lang="scss" scoped>
    a {
        color: #fff;
        text-decoration: none;
    }
    .banner {
        overflow: hidden;
        // margin-top: -140px;
    }
    .carousel-inner,
    .carousel-item,
    .carousel-item img {
        width: 100%;
    }
    .carousel-inner {
        height: pxToRem(1080);
        background: url('/newHome/header-banner.png');
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        .mask {
            opacity: 0.5;
            // background: #000;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
        }
        img {
            position: relative;
        }
        .carousel-inner-content {
            width: pxToRem(1000);
            margin: 0 auto;
            position: relative;
            height: 100%;
            .banner-text-container {
                text-align: center;
                color: #fff;
                width: 100%;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: pxToRem(40);

                .banner-title {
                    font-family: 'SFProDisplayBlack';
                    font-weight: 1000;
                    font-size: pxToRem(88);
                    line-height: 1.17;
                    letter-spacing: -1.67%;
                    color: #ffffff;
                    margin: 0 0 pxToRem(20) 0;
                }

                .banner-description {
                    font-family: 'SF Pro', sans-serif;
                    font-weight: 510;
                    font-size: pxToRem(30);
                    line-height: 1.19;
                    color: rgba(255, 255, 255, 0.9);
                    margin: 0;
                    text-align: left;
                    max-width: pxToRem(800);
                }
            }
        }
        .text {
            width: pxToRem(541);
            font-size: pxToRem(48);
            color: #000;
            text-align: left;
            position: absolute;
            left: 0;
            // margin-left: pxToRem(-590);
            top: pxToRem(426);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            @extend .custom-font-black;
        }
        .btn {
            width: pxToRem(186);
            height: pxToRem(72);
            position: absolute;
            // left: 50%;
            background: #e27049;
            color: #fff;
            border-radius: pxToRem(63);
            top: pxToRem(646);
            // margin-left: pxToRem(-550);
            font-size: pxToRem(24);
            font-weight: 590;
            line-height: pxToRem(24);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .right {
            position: absolute;
            top: pxToRem(127);
            right: 0;
        }
    }
    .carousel-item img {
        object-fit: cover;
    }

    // 1440px 断点
    @media (max-width: 1440px) {
        .carousel-inner {
            .carousel-inner-content {
                width: pxToRem(1200);

                .banner-text-container {
                    max-width: pxToRem(700);

                    .banner-title {
                        font-size: pxToRem(52);
                    }

                    .banner-description {
                        font-size: pxToRem(26);
                        max-width: pxToRem(700);
                    }
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 1025px) {
        .carousel-inner {
            .carousel-inner-content {
                width: pxToRem(1000);

                .banner-text-container {
                    max-width: pxToRem(600);

                    .banner-title {
                        font-size: pxToRem(48);
                    }

                    .banner-description {
                        font-size: pxToRem(24);
                        max-width: pxToRem(600);
                    }
                }
            }
        }
    }
    @media (max-width: 768px) {
        .banner {
            margin-top: pxToRem75(70);
        }
        .carousel-inner {
            height: pxToRem75(472);
            width: pxToRem75(750);
            .carousel-inner-content {
                position: relative;
                width: pxToRem75(615);

                .banner-text-container {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: pxToRem75(20);
                    max-width: pxToRem75(580);
                    text-align: center;

                    .banner-title {
                        font-size: pxToRem75(32);
                        line-height: 1.2;
                        margin-bottom: pxToRem75(16);
                    }

                    .banner-description {
                        font-size: pxToRem75(18);
                        line-height: 1.3;
                        max-width: pxToRem75(580);
                        text-align: center;
                    }
                }
            }
            .text {
                font-size: pxToRem75(30);
                line-height: pxToRem75(35.8);
                margin: 0 auto;
                width: pxToRem75(307);
                height: auto;
                margin-left: pxToRem75(0);
                top: pxToRem75(128);
            }
            .btn {
                width: pxToRem75(174);
                height: pxToRem75(64);
                top: pxToRem75(276);
                font-size: pxToRem75(24);
                line-height: pxToRem75(24);
            }
            .right {
                top: 0;
                right: 0;
                img {
                    width: pxToRem75(310);
                }
            }
        }
    }
</style>
